<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<canvas id="canvas" width="600" height="600" style="border: 2px solid; display: block;  margin: 50px auto">
    你的浏览器不支持七巧板
</canvas>
</body>



<script type="text/javascript">


    window.onload = function(){

        var other.canvas =  document.getElementById("canvas");
        var context = canvas.getContext("2d");

        context.beginPath();
        context.moveTo(100,100);
        context.lineTo(400,400);
        context.lineTo(100,400);
        context.lineTo(100,100);
        context.closePath();

        context.strokeStyle="blue";
        context.stroke();
/**
 *  填充
 * */
        context.fillStyle= "orange";
        context.fill();


        context.beginPath();
        context.moveTo(100,100);
        context.lineTo(150,50);
        context.closePath();

        context.strokeStyle="black";
        context.stroke();


    }

</script>
</html>